<template>
  <div class="Hcenter flex1">
    <div class="flexC">
      <div class="flex" style="padding:1rem 0rem; margin-top: -2.5rem;">
        <div class="flexC  textC">
          <div class="flex  cursor font_s40" style="color: #FFDC75; ">
            <p class="flex1 textR">{{ num1 }}</p>
            <p class="flex1 textC">{{ num2 }}</p>
            <p class="flex1 textL" style="padding-left: 1rem;">{{ num3 }}</p>
            <p class="flex1 textL">{{ num4 }}</p>
          </div>

          <img src="../../assets/img/home/006.png" alt="" style="width: 48.1875rem;height:3.3125rem ;" />
          <div class="flex  cursor font_s18" style="color: #F5B45F; ">
            <p class="flex1 textR" @click="clone.echartsA = true" :class="{ cursor: name1 === '当日申请数' }">{{ name1 }}</p>
            <p class="flex1 textC" @click="clone.echartsB = true" :class="{ cursor: name2 === '当日评估' }">{{ name2 }}</p>
            <p class="flex1 textL" @click="clone.echartsC = true" style="padding-left: 1rem;" :class="{ cursor: name3 === '当日申请数' }">{{ name3 }}</p>
            <p class="flex1 textL" @click="clone.echartsD = true" :class="{ cursor: name4 === '累计长护险基金支付' }">{{ name4 }}</p>
          </div>
        </div>
        <div class="qipaoShow" v-if="arrowTitleState">
          <img v-if="arrowTitleImg === '1'" src="@/assets/img/arrowTitleImg01.png" style="width: 60rem;position: absolute;left: -8rem;z-index: 9;" />
          <img v-if="arrowTitleImg === '2'" src="@/assets/img/arrowTitleImg02.png" style="width: 49rem;position: absolute;left: -2rem;z-index: 9;" />
          <img v-if="arrowTitleImg === '3'" src="@/assets/img/arrowTitleImg03.png" style="width: 60rem;position: absolute;left: -2rem;z-index: 9;" />
        </div>
      </div>
      <!-- 地图 -->

      <div id="container"></div>
      <div class="map  cursor ">
        <ul class="flex " style="position: absolute;  left: 23rem; top:7rem;">
          <li class="icon icon_a"></li>
          <li class="icon icon_b"></li>
          <li class="icon icon_c"></li>
          <li class="icon icon_d"></li>
          <li class="icon icon_e"></li>
        </ul>
        <div class="flexC textC font_s18" style="position: absolute;  left: 1rem; top:7rem;">
          <p class=" map_pa colorF ">散点图</p>
          <p class="map_pb colorF">热力图</p>
        </div>

        <div class="font_s16 Bold  cursor" :class="{ category_temp: arrowImgState }">
          <ul class="flexC JustifyContentSA category" v-if="!arrowImgState">
            <li @click="switchmap2(1)" :style="category === 1 ? 'color: #00FFFF' : 'color: #a2adbf'">
              <img class="verticM" :src="category === 1 ? '/img/click02.png' : '/img/click01.png'" alt />
              住养服务机构（121）
            </li>
            <li @click="switchmap2(2)" :style="category === 2 ? 'color: #00FFFF' : 'color: #a2adbf'">
              <img class="verticM" :src="category === 2 ? '/img/click02.png' : '/img/click01.png'" alt />
              居家服务机构（35）
            </li>
            <li @click="switchmap2(3)" :style="category === 3 ? 'color: #00FFFF' : 'color: #a2adbf'">
              <img class="verticM" :src="category === 3 ? '/img/click02.png' : '/img/click01.png'" alt />
              护理站（31）
            </li>
            <li @click="switchmap2(4)" :style="category === 4 ? 'color: #00FFFF' : 'color: #a2adbf'">
              <img class="verticM" :src="category === 4 ? '/img/click02.png' : '/img/click01.png'" alt />
              日间照料中心（12）
            </li>
            <li @click="switchmap2(5)" :style="category === 5 ? 'color: #00FFFF' : 'color: #a2adbf'">
              <img class="verticM" :src="category === 5 ? '/img/click02.png' : '/img/click01.png'" alt />
              其他（9）
            </li>
          </ul>
          <p>
            <img v-if="!arrowImgState" src="../../assets/img/arrowImg.png" class="arrowImg" @click="arrowImgState = true" />
            <img v-if="arrowImgState" src="../../assets/img/arrowImg_two.png" class="arrowImg" @click="arrowImgState = false" />
          </p>
        </div>
      </div>
    </div>
    <ModalEcharts v-if="clone.echartsA" @hidden="hiddenEcharts(0)">
      <div class="flex AlignItemsC JustifyContentC echartsBJ echartsA"><chart ref="chart" :options="orgOptions.echartsA" :auto-resize="true"></chart></div>
    </ModalEcharts>

    <ModalEcharts v-if="clone.echartsB" @hidden="hiddenEcharts(1)">
      <div class="flex AlignItemsC JustifyContentC echartsBJ echartsB"><chart ref="chart" :options="orgOptions.echartsB" :auto-resize="true"></chart></div>
    </ModalEcharts>
    <ModalEcharts v-if="clone.echartsC" @hidden="hiddenEcharts(2)">
      <div class="flex AlignItemsC JustifyContentC echartsBJ echartsC"><chart ref="chart" :options="orgOptions.echartsC" :auto-resize="true"></chart></div>
    </ModalEcharts>
    <ModalEcharts v-if="clone.echartsD" @hidden="hiddenEcharts(3)">
      <div class="flex AlignItemsC JustifyContentC echartsBJ echartsD"><chart ref="chart" :options="orgOptions.echartsD" :auto-resize="true"></chart></div>
    </ModalEcharts>
  </div>
</template>

<script>
import { mapFun } from '@/components/gdmap'
import { qitadata, rituodata, hulidata, jujiadata, zhuyangdata } from '@/listData.js'
import ModalEcharts from '@/components/ModalEcharts'
export default {
  name: 'Hcenter',
  components: {
    ModalEcharts
  },
  data () {
    return {
      orgOptions: { echartsA: {}, echartsB: {}, echartsC: {}, echartsD: {} },
      clone: {
        echartsA: false,
        echartsB: false,
        echartsC: false,
        echartsD: false
      },

      category: 1,
      sIObject: null,
      arrowTitleState: false,
      arrowTitleImg: '',
      arrowImgState: false,
      // 数据
      num1: '',
      num2: '',
      num3: '',
      num4: '',
      // 数据名
      name1: '',
      name2: '',
      name3: '',
      name4: '',
      rowArr: [
        {
          numbers: {
            num1: '411人',
            num2: '547人',
            num3: '3.9万',
            num4: '4005.95万元'
          },
          names: {
            name1: '当日申请数',
            name2: '当日评估数',
            name3: '当日服务数',
            name4: '当月结算费用'
          }
        },
        {
          numbers: {
            num1: '8.29万',
            num2: '7.25万',
            num3: '6.02万',
            num4: '3.95亿'
          },
          names: {
            name1: '累计申请数',
            name2: '累计评估数',
            name3: '累计服务数',
            name4: '累计结算费用'
          }
        }
      ]
    }
  },
  mounted () {
    // 获取箭头数据
    this.getRowData()

    // echarts
    let colors = ['#00ff00', '#0A5EBD', '#74ADFF']
    this.orgOptions.echartsA = {
      color: colors,
      title: { text: '居家和住养机构结算趋势图' },

      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      legend: {
        data: ['总费用', '基金支付费用', '结算人次']
      },

      xAxis: [
        {
          type: 'category',
          data: ['2018,1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '2019年1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月'],
          axisPointer: {
            type: 'shadow'
          }
        }
      ],

      yAxis: [
        {
          type: 'value',
          name: '(万元)',
          min: 0,
          max: 250,
          interval: 50,
          axisLine: {
            lineStyle: {
              color: colors[0]
            },
            formatter: '{value}'
          }
        },
        {
          type: 'value',
          name: '人次',
          min: 0,
          max: 25,
          interval: 5,
          axisLine: {
            lineStyle: {
              color: colors[1]
            },
            formatter: '{value}'
          }
        }
      ],

      series: [
        {
          name: '总费用',
          type: 'bar',
          barWidth: 10,
          data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2]
        },
        {
          name: '总费用',
          type: 'bar',
          barWidth: 10,
          data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2]
        },
        {
          name: '结算人次',
          type: 'line',
          yAxisIndex: 1,
          data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2, 2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4]
        }
      ]
    }
    this.orgOptions.echartsB = {
      color: ['#3398DB'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },

      xAxis: [
        {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '直接访问',
          type: 'bar',
          barWidth: '30',
          data: [10, 52, 200, 334, 390, 330, 220]
        }
      ]
    }
    this.orgOptions.echartsC = {
      color: ['#3398DB'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      // grid: {
      //   left: '15%',
      //   right: '4%',
      //   bottom: '40%',
      //   containLabel: true
      // },
      xAxis: [
        {
          type: 'category',
          data: [
            '大团镇社区事务受理服务中心',
            '新场镇社区事务受理服务中心  ',
            '祝桥镇东海社区事务受理服务中心',
            '祝桥镇盐仓社区事务受理服务中心 ',
            '祝桥镇社区事务受理服务中心',
            '康桥镇社区事务受理服务中心',
            '航头镇社区事务受理服务中心',
            '川沙新镇社区事务受理服务中心  ',
            '高行镇社区事务受理服务中心',
            '万祥镇社区事务受理服务中心',
            '唐镇社区事务受理服务中心',
            '高东镇社区事务受理服务中心',
            '三林镇社区事务受理服务中心',
            '芦潮港镇社区事务受理服务中心',
            '周家渡街道社区事务受理服务中心',
            '浦兴街道社区事务受理服务中心',
            '祝桥镇施湾社区事务受理服务中心',
            '洋泾街道社区事务受理服务中心',
            '南码头路街道社区事务受理服务中心',
            '书院镇社区事务受理服务中心',
            '祝桥镇社区事务受理服务中心江镇分中心',
            '航头镇社区事务受理服务中心鹤沙航城分中心'
          ],
          axisLabel: {
            alignWithLabel: true,
            interval: 0,
            rotate: 40
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '',
          type: 'bar',
          barWidth: '20',
          data: [10, 23, 44, 56, 60, 45, 45, 10, 23, 44, 56, 60, 45, 45, 10, 23, 44, 56, 60, 45, 45, 45]
        }
      ]
    };
    (this.orgOptions.echartsD = {
      color: ['#3398DB'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },

      xAxis: [
        {
          type: 'category',
          data: ['201910', '201911', '201912', '202001', '202002', '202003', '202004', '202005'],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '',
          type: 'bar',
          barWidth: '30',
          data: [0, 0, 3825, 530, 547, 821, 1139, 945]
        }
      ]
    }),
    this.gdmap()
    window.vm = this
  },

  methods: {
    gdmap () {
      let map = new AMap.Map('container', {
        resizeEnable: true,
        mapStyle: 'amap://styles/darkblue',
        zoom: 12,
        // pitch: 40,
        // rotation: 45,
        // viewMode: '3D',
        center: [121.552556, 31.215723]
      })
      this.$root.MapGd = map
    },
    // 箭头鼠标移入
    arrowMouseenter (name, key) {
      if (name === '当日申请数') {
        this.arrowTitleState = true
        this.arrowTitleImg = '1'
      } else if (name === '当日评估数') {
        this.arrowTitleState = true
        this.arrowTitleImg = '2'
      }
      if (name === '累计长护险基金支付') {
        this.arrowTitleState = true
        this.arrowTitleImg = '3'
      }
      this.sIObject = setInterval(() => {
        if (this[key] !== name) {
          this.leave()
        }
      }, 4000)
    },
    // 箭头鼠标移出
    leave () {
      if (this.sIObject) {
        clearInterval(this.sIObject)
      }
      this.arrowTitleState = false
      this.arrowTitleImg = ''
    },
    // 获取箭头数据
    getRowData () {
      let index = 0
      setInterval(() => {
        if (index === 0) {
          index = 1
        } else if (index === 1) {
          index = 0
        }
        // console.log('index: ', index)
        this.num1 = this.rowArr[index].numbers.num1
        this.num2 = this.rowArr[index].numbers.num2
        this.num3 = this.rowArr[index].numbers.num3
        this.num4 = this.rowArr[index].numbers.num4

        this.name1 = this.rowArr[index].names.name1
        this.name2 = this.rowArr[index].names.name2
        this.name3 = this.rowArr[index].names.name3
        this.name4 = this.rowArr[index].names.name4
      }, 2000)
    },

    // 地图菜单
    switchmap2 (index) {
      this.category = index
      if (index === 1) {
        // console.log('zhuyang', zhuyang)
        mapFun(this.$root.MapGd, zhuyangdata)
        // mapFun(this.$root.MapGd, lowRisk)
      } else if (index === 2) {
        mapFun(this.$root.MapGd, jujiadata)
      } else if (index === 3) {
        mapFun(this.$root.MapGd, hulidata)
      } else if (index === 4) {
        mapFun(this.$root.MapGd, rituodata)
      } else if (index === 5) {
        mapFun(this.$root.MapGd, qitadata)
      }
    },
    // echarts
    hiddenEcharts (index) {
      this.isActive = index
      if (index === 0) {
        this.clone.echartsA = false
      } else if (index === 1) {
        this.clone.echartsB = false
      } else if (index === 2) {
        this.clone.echartsC = false
      } else if (index === 3) {
        this.clone.echartsD = false
      }
    }
  }
}
</script>

<style lang="scss">
.Hcenter {
  #container {
    width: 47.625rem;
    height: 34.25rem;
    position: absolute;
    top: 24.4%;
    left: 29.95%;
    z-index: 0;
  }
  .echartsBJ {
    background: url(../../assets/img/components/02.png) no-repeat;
    background-size: 100% 100%;
  }
  .echartsA {
    position: absolute;
    top: 24%;
    left: 9.5%;
    width: 50.5rem;
    height: 30.75rem;
  }
  .echartsB {
    position: absolute;
    top: 24%;
    left: 17.7%;
    width: 50.5rem;
    height: 30.75rem;
  }
  .echartsC {
    position: absolute;
    top: 24%;
    left: 19.6%;
    width: 62.5rem;
    height: 30.75rem;
  }

  .echartsD {
    position: absolute;
    top: 24%;
    left: 34.8%;
    width: 50.5rem;
    height: 30.75rem;
  }
  .map {
    position: absolute;
    .map_pa {
      margin: 1rem;
      width: 5.625rem;
      height: 2.25rem;
      background: rgba(45, 125, 241, 1);
      border-radius: 1.5rem;
      line-height: 2.5rem;
    }
    .map_pb {
      margin: 1rem;
      width: 5.625rem;
      height: 2.25rem;
      border: 0.125rem solid rgba(45, 125, 241, 1);
      border-radius: 1.5rem;
      color: #2d7df1;
      line-height: 2.5rem;
    }
    .icon {
      width: 2.9375rem;
      height: 3rem;
      margin: 1rem;
    }
    .icon_a {
      background: url(../../assets/icon01.png);
      background-size: 100% 100%;
    }
    .icon_b {
      background: url(../../assets/icon01.png);
      background-size: 100% 100%;
    }
    .icon_c {
      background: url(../../assets/icon02.png);
      background-size: 100% 100%;
    }
    .icon_d {
      background: url(../../assets/icon03.png);
      background-size: 100% 100%;
    }
    .icon_e {
      background: url(../../assets/icon04.png);
      background-size: 100% 100%;
    }
  }

  .category {
    width: 14rem;
    height: 17.75rem;
    background: rgba(4, 13, 39, 0.7);
    border-radius: 0px 1rem 1rem 0px;
    position: absolute;
    top: 23.3rem;
    left: 0rem;
    img {
      padding: 0 1rem;
    }
  }
  .category_temp {
    width: 1rem !important;
    .arrowImg {
      left: 0rem !important;
    }
  }
  .arrowImg {
    width: 1.2rem;
    height: 5rem;
    position: absolute;
    top: 29.2rem;
    left: 14rem;
  }
}
</style>
